<template>
    <div>
        <h1>员工列表</h1>

        <el-table :data="tableData" border style="width: 100%">
            <el-table-column prop="id" label="ID" />
            <el-table-column prop="name" label="用户名" />
            <el-table-column prop="role_name" label="角色" />

        </el-table>
        <el-button type="primary" @click="showflag = true">添加</el-button>

        <!-- 弹窗 -->
        <el-dialog v-model="showflag" title="添加用户" width="500">
            <el-form :model="form">
                <el-form-item label="用户名">
                    <el-input v-model="form.name" autocomplete="off" />
                </el-form-item>
                <el-form-item label="角色">
                    <el-select v-model="form.role" placeholder="请选择角色">
                        <el-option v-for="item in rolelist" :label="item.name" :key="item.id" :value="item.id" />

                    </el-select>
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="showflag = false">取消</el-button>
                    <el-button type="primary" @click="addUser">
                        添加
                    </el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>
<script setup>
import { ref, onMounted } from 'vue'

import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import http from '../http'

const router = useRouter()

const tableData = ref([])

const getUserinfo = () => {
    http.get('app/users/')
        .then((res) => {
            console.log(res,'22222222222222222222')
            tableData.value = res.data.data
        })
}
// 添加
const showflag = ref(false)
const rolelist = ref([])

const form = ref({
    name: '',
    role: ''
})

const getRole = () => {
    http.get('app/role/')
        .then((res) => {
            console.log(res,'333333333333333333333333333333')
            rolelist.value = res.data.data
            console.log(rolelist.value, '111111111111111111111111')
        })
}


const addUser = () => {
    http.post('app/users/', form.value)
        .then((res) => {
            ElMessage.success('添加成功')
            showflag.value = false
            form.value = {
                name: '',
                role: ''
            }
            getUserinfo()

        })
}


onMounted(() => {
    getUserinfo()
    getRole()
})

</script>